<script setup lang="ts">
import { getUserInfoById } from '@/api/user';
import { User } from '@/api/user/type';
import { router } from '@/router';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const receiver = ref({} as User);
const loading = ref(true);

onMounted(async () => {
    try {
        const route = useRoute();
        const receiverId = route.query.receiverId as string;
        
        if (receiverId) {
            const res = await getUserInfoById(receiverId);
            receiver.value = res.data as User;
        }
    } catch (error) {
        console.error('获取用户信息失败:', error);
    } finally {
        loading.value = false;
    }
})

const back = () => {
    router.back();
}

const viewUserProfile = () => {
    if (receiver.value.id) {
        router.push({
            name: 'UserIndex',
            query: {
                id: receiver.value.id
            }
        });
    }
}
</script>

<template>
    <div class="chat-header">
        <div class="header-left">
            <button class="back-button" @click="back">
                <van-icon name="arrow-left" />
            </button>
        </div>
        
        <div class="header-center" @click="viewUserProfile">
            <div v-if="loading" class="loading-name">
                <van-loading type="spinner" size="16" />
            </div>
            <div v-else class="user-name">
                {{ receiver.nickname || '加载中...' }}
                <van-icon name="arrow" class="profile-arrow" />
            </div>
        </div>
        
        <div class="header-right">
            <button class="action-button" title="更多操作">
                <van-icon name="ellipsis" />
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.chat-header {
    display: flex;
    align-items: center;
    padding: 16px;
    height: 64px;
    
    .header-left {
        .back-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            
            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }
            
            .van-icon {
                font-size: 20px;
            }
        }
    }
    
    .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        
        .loading-name {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 24px;
        }
        
        .user-name {
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            
            .profile-arrow {
                opacity: 0;
                font-size: 14px;
                margin-left: 4px;
                transition: opacity 0.2s;
            }
            
            &:hover .profile-arrow {
                opacity: 1;
            }
        }
    }
    
    .header-right {
        .action-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            
            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }
            
            .van-icon {
                font-size: 20px;
            }
        }
    }
}
</style>